<template>
    <div>
        <div class="header">
            <div class="container" v-if="headerlist.length > 0">
                <h1><a href="">小兔鲜</a></h1>
                <ul>
                    <li>
                        <router-link to="/">首页</router-link>
                        
                    </li>
                    <li @click="toCategory(item)" v-for="item, index in headerlist" :key="item.id"
                        @mouseover="headerDown(index)" @mouseout="tabIndex = -1">
                        <a href="javascript:;">{{ item.name }}</a>
                        <div class="headerNav" :class="{ headerover: index == tabIndex }">
                            <ul>
                                <li v-for="listItem in item.children">
                                    <a href="javascript:;">
                                        <img :src="listItem.picture">
                                        <p>{{ listItem.name }}</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
                <div class="secrch">
                    <input type="text" placeholder="搜一搜">
                </div>
                <div class="cart" @click="cart">
                    <a href="javascript:;">
                        <em>{{ $store.getters.getShopNum }}</em>
                    </a>
                    <div class="layer">
                        <div class="list">
                            <div class="item" v-for="item, index in cartList">
                                <a href="javascript:;">
                                    <img :src="item.picture" alt="">
                                    <div class="center">
                                        <p class="name">{{ item.name }}</p>
                                        <p class="attr">{{ item.attrsText }}</p>
                                    </div>
                                    <div class="right">
                                        <p class="price">￥{{ item.price }}</p>
                                        <p class="count">X{{ item.count }}</p>
                                    </div>
                                </a>
                                <div class="del" @click="del(index)">X</div>
                            </div>
                        </div>
                        <div class="foot">
                            <div class="left">
                                <p>共<span>{{$store.getters.getShopNum}}</span>件商品</p>
                                <p>￥</p>
                            </div>
                            <button>去购物车结算</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="heaerfixed" :class="{ show: scrollTop > 80 }" :style="{ top: Top + 'px' }" v-if="scrollTop > 80">
            <div class="container">
                <h1></h1>
                <ul>
                    <li>
                        <router-link to="/">首页</router-link>
                    </li>
                    <router-link :to="'/category/' + item.id" tag="li" v-for="item, index in headerlist" :key="item.id"
                        @mouseover="headerDown(index)" @mouseout="tabIndex = -1">
                        <a href="javascript:;">{{ item.name }}</a>
                        <div class="headerNav" :class="{ headerover: index == tabIndex }">
                            <ul>
                                <li v-for="listItem in item.children">
                                    <a href="javascript:;">
                                        <img :src="listItem.picture">
                                        <p>{{ listItem.name }}</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </router-link>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            headerdown: false,
            tabIndex: -1,
            Top: 0,
            scrollTop: 0,
            cartList: [],
        }
    },
    props: ['headerlist'],
    methods: {
        headerDown(index) {
            this.tabIndex = index
        },
        cart() {
            this.$router.push('/cart')
        },
        del(index) {
            this.cartList.splice(index, 1)
        },
        toCategory(item){
            this.$router.push('/category/'+item.id)
            sessionStorage.setItem('metaTitle',item.name)
            this.$route.meta.title = ' > '+sessionStorage.getItem('metaTitle',item.name)
        }
    },
    mounted() {
        // console.log(this.$store.getters.getShopNum  );
        var _this = this  // this指的是window，这一步将this转化为vue
        window.addEventListener('scroll', function () {
            _this.scrollTop = document.documentElement.scrollTop
            if (_this.scrollTop > 80) {
                _this.Top = 80
            } else {
                _this.Top = 0
            }
        })


        var token = this.$store.state.userInfor.a.token
        // console.log(token);
        this.axios({
            method: 'GET',
            url: 'https://apipc-xiaotuxian-front.itheima.net/member/cart',
            headers: {
                Authorization: `Bearer ${token}`
            },
        }).then(res => {
            this.$store.commit('getcart', res.data.result)
            // console.log(this.$store.state.cart.cartList);
            this.cartList = this.$store.state.cart.cartList
        })
    
    },
}
</script>

<style lang="scss">
.header {
    height: 132px;
    background: #fff;

    .container {
        display: flex;
        align-items: center;

        h1 {
            width: 200px;

            a {
                text-indent: -999px;
                display: block;
                height: 132px;
                width: 100%;
                text-indent: -9999px;
                background: url(http://erabbit.itheima.net/img/logo.0940ebb5.png) no-repeat center 18px/contain;
            }
        }

        ul {
            width: 820px;
            display: flex;
            justify-content: space-around;
            padding-left: 40px;
            position: relative;
            z-index: 999;

            li {
                margin-right: 40px;
                width: 38px;
                text-align: center;

                a {
                    font-size: 16px;
                    line-height: 32px;
                    height: 32px;
                    display: inline-block;
                }

                .headerover {
                    height: 132px !important;
                    background: #fff;
                    // border: 1px solid #000;
                    opacity: 1 !important;
                }

                .headerNav {
                    width: 1240px;
                    background-color: #fff;
                    position: absolute;
                    left: -200px;
                    top: 56px;
                    height: 0;
                    overflow: hidden;
                    opacity: 0;
                    box-shadow: 0 0 5px #ccc;
                    transition: all .2s .1s;


                    ul {
                        display: flex;
                        flex-wrap: wrap;
                        padding: 0 70px;
                        align-items: center;
                        height: 132px;

                        li {
                            width: 110px;
                            text-align: center;

                            img {
                                width: 60px;
                                height: 60px;
                            }

                            p {
                                margin-top: 10px;
                            }
                        }
                    }
                }
            }
        }

        .secrch {
            width: 170px;
            height: 32px;
            position: relative;
            border-bottom: 1px solid #e7e7e7;
            line-height: 32px;

            input {
                width: 140px;
                padding-left: 5px;
                color: #666;
                border: none;
            }
        }

        .cart {
            width: 50px;
            position: relative;
            z-index: 600;

            &>a {
                height: 32px;
                line-height: 32px;
                text-align: center;
                position: relative;
                display: block;

                em {
                    font-style: normal;
                    position: absolute;
                    right: 0;
                    top: 0;
                    padding: 1px 6px;
                    line-height: 1;
                    background: #e26237;
                    color: #fff;
                    font-size: 12px;
                    border-radius: 10px;
                    font-family: Arial;
                }
            }

            &:hover .layer {
                opacity: 1;
                transform: none;
            }

            .layer {
                opacity: 0;
                transition: all .4s .2s;
                transform: translateY(-200px) scaleY(0);
                width: 400px;
                height: 400px;
                position: absolute;
                top: 50px;
                right: 0;
                box-shadow: 0 0 10px rgb(0 0 0 / 20%);
                background: #fff;
                border-radius: 4px;
                padding-top: 10px;

                &::before {
                    content: "";
                    position: absolute;
                    right: 14px;
                    top: -10px;
                    width: 20px;
                    height: 20px;
                    background: #fff;
                    transform: scaleX(.6) rotate(45deg);
                    box-shadow: -3px -3px 5px rgb(0 0 0 / 10%);
                }

                .list {
                    height: 310px;
                    overflow: auto;
                    padding: 0 10px;

                    .item {
                        border-bottom: 1px solid #f5f5f5;
                        padding: 10px 0;
                        position: relative;

                        a {
                            display: flex;
                            align-items: center;

                            img {
                                height: 80px;
                                width: 80px;
                            }

                            .center {
                                padding: 0 10px;
                                width: 200px;

                                .name {
                                    font-size: 16px;
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 2;
                                    text-overflow: ellipsis;
                                    overflow: hidden;
                                }

                                .attr {
                                    color: #999;
                                    padding-top: 5px;
                                    text-overflow: ellipsis;
                                    overflow: hidden;
                                    white-space: nowrap;
                                }
                            }

                            .right {
                                width: 100px;
                                padding-right: 20px;
                                text-align: center;

                                .price {
                                    font-size: 16px;
                                    color: #cf4444;
                                }

                                .count {
                                    color: #999;
                                    margin-top: 5px;
                                    font-size: 16px;
                                }
                            }

                        }

                        .del {
                            position: absolute;
                            bottom: 38px;
                            right: 0;
                            opacity: 0;
                            color: #666;
                            transition: all .5s;
                        }

                        &:hover .del {
                            opacity: 1;
                            cursor: pointer;
                        }
                    }
                }

                .foot {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    height: 70px;
                    width: 100%;
                    padding: 10px;
                    display: flex;
                    justify-content: space-between;
                    background: #f8f8f8;
                    align-items: center;

                    .left {
                        padding-left: 10px;
                        color: #999;

                        p {
                            &:nth-of-type(2) {
                                font-size: 18px;
                                color: #cf4444;
                            }
                        }
                    }

                    button {
                        border-color: #27ba9b;
                        color: #27ba9b;
                        background: #e6faf6;
                        width: 180px;
                        height: 50px;
                        font-size: 16px;
                        text-align: center;
                        border-radius: 4px;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}

.show {
    transition: all .3s linear;
    transform: none;
    opacity: 1 !important;
    position: fixed !important;
    // top:0;
}

.heaerfixed {
    width: 100%;
    height: 80px;
    position: absolute;
    left: 0;
    z-index: 999;
    background-color: #fff;
    border-bottom: 1px solid #e4e4e4;
    transform: translateY(-100%);
    opacity: 0;

    .container {
        display: flex;
        align-items: center;

        h1 {
            width: 200px;
            height: 80px;
            background: url('http://erabbit.itheima.net/img/logo.0940ebb5.png') no-repeat right 2px;
            background-size: 160px auto;
        }


        ul {
            width: 820px;
            display: flex;
            justify-content: space-around;
            padding-left: 40px;
            position: relative;
            z-index: 999;

            li {
                margin-right: 40px;
                width: 38px;
                text-align: center;

                a {
                    font-size: 16px;
                    line-height: 32px;
                    height: 32px;
                    display: inline-block;
                }

                .headerover {
                    height: 132px !important;
                    background: #fff;
                    // border: 1px solid #000;
                    opacity: 1 !important;
                }

                .headerNav {
                    width: 1240px;
                    background-color: #fff;
                    position: absolute;
                    left: -200px;
                    top: 56px;
                    height: 0;
                    overflow: hidden;
                    opacity: 0;
                    box-shadow: 0 0 5px #ccc;
                    transition: all .2s .1s;


                    ul {
                        display: flex;
                        flex-wrap: wrap;
                        padding: 0 70px;
                        align-items: center;
                        height: 132px;

                        li {
                            width: 110px;
                            text-align: center;

                            img {
                                width: 60px;
                                height: 60px;
                            }

                            p {
                                margin-top: 10px;
                            }
                        }
                    }
                }
            }
        }

        .right {
            width: 220px;
            display: flex;
            text-align: center;
            padding-left: 40px;
            border-left: 2px solid #27ba9b;

            a {
                width: 38px;
                margin-right: 40px;
                font-size: 16px;
                line-height: 1;
                background: #fff;
            }
        }
    }
}
</style>